import { useState, useEffect } from 'react'
import { Select } from 'tdesign-react'
import { useTranslation } from 'react-i18next'
import { languageList } from '@/locale/language'
import { useLanguage } from '@/stores'

const ChangeLanguage = (props: any) => {

  const { language, setLanguage } = useLanguage((state: any) => state)
  const { i18n } = useTranslation()

  /**
   * 切换语言
   */
  const onLanguageChange = (value: LanguageValueType) => {
    setLanguage(value)
    i18n.changeLanguage(value)
  }

  return <Select
    value={language}
    onChange={(value) => { onLanguageChange(value as LanguageValueType) }}
    style={{ width: '160px' }}
    options={languageList}
  />
}

export default ChangeLanguage
